<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <link rel="stylesheet" href="/dist/css/AdminLTE.css">
    <link rel="stylesheet" href="/dist/css/skins/_all-skins.min.css">
    <!-- 以上为公共css -->
    <link rel="stylesheet" href="/plugins/bootstrap/treeview/bootstrap-treeview.min.css">


</head>

<div class="diy_table_panel">
    <div class="diy_table_head">
        <form class="row">
            <input type="hidden" name="pageSize" value="20">
            <input type="hidden" name="pageCurrent" value="10">
            <div class="col-xs-4">
                <div class="input-group">
                    <span class="input-group-addon">用户名</span>
                    <input name="username" class="form-control">
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group">
                    <span class="input-group-addon">E-mail</span>
                    <input name="email" class="form-control">
                </div>
            </div>
            <div class="col-xs-4">
                <button type="submit" class="btn btn-primary">搜索</button>
            </div>
        </form>
    </div>
    <div id="treeview-checkable" style="height: 400px; width:400px;">
    </div>
    <button id="value" style="width: 100px">当前值</button>
</div>
<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="/plugins/bootstrap/treeview/bootstrap-treeview.min.js"></script>
<script>

    $.ajax({
        url: "/tree",
        dataType: "json",
        success: function (d) {
            if (!d) alert('没有数据');
            var data = d.nodes;
            init(data);
        }
    });


    function init(tree) {
        var $tree = $('#treeview-checkable').treeview({
            data: tree,
            showIcon: true,
            showCheckbox: true,
            showTags: true,
            levels: 2,
            nodeIcon: 'glyphicon glyphicon-tree-deciduous', //https://getbootstrap.com/components/
            onNodeChecked: nodeChecked,
            onNodeUnchecked: nodeUnchecked
        });

        var nodeCheckedSilent = false;

        function nodeChecked(event, node) {
            if (nodeCheckedSilent) {
                return;
            }
            nodeCheckedSilent = true;
            checkAllParent(node);
            checkAllSon(node);
            nodeCheckedSilent = false;
        }

        var nodeUncheckedSilent = false;

        function nodeUnchecked(event, node) {
            if (nodeUncheckedSilent)
                return;
            nodeUncheckedSilent = true;
            uncheckAllParent(node);
            uncheckAllSon(node);
            nodeUncheckedSilent = false;
        }

        //选中全部父节点
        function checkAllParent(node) {
            $tree.treeview('checkNode', node.nodeId, {silent: true});
            var parentNode = $tree.treeview('getParent', node.nodeId);
            if (!("nodeId" in parentNode)) {
                return;
            } else {
                checkAllParent(parentNode);
            }
        }

        //取消全部父节点
        function uncheckAllParent(node) {
            $tree.treeview('uncheckNode', node.nodeId, {silent: true});
            var siblings = $tree.treeview('getSiblings', node.nodeId);
            var parentNode = $tree.treeview('getParent', node.nodeId);
            if (!("nodeId" in parentNode)) {
                return;
            }
            var isAllUnchecked = true;  //是否全部没选中
            for (var i in siblings) {
                if (siblings[i].state.checked) {
                    isAllUnchecked = false;
                    break;
                }
            }
            if (isAllUnchecked) {
                uncheckAllParent(parentNode);
            }

        }

        //级联选中所有子节点
        function checkAllSon(node) {
            $tree.treeview('checkNode', node.nodeId, {silent: true});
            if (node.nodes != null && node.nodes.length > 0) {
                for (var i in node.nodes) {
                    checkAllSon(node.nodes[i]);
                }
            }
        }

        //级联取消所有子节点
        function uncheckAllSon(node) {
            $tree.treeview('uncheckNode', node.nodeId, {silent: true});
            if (node.nodes != null && node.nodes.length > 0) {
                for (var i in node.nodes) {
                    uncheckAllSon(node.nodes[i]);
                }
            }
        }

        function getValue() {
            var map = [];
            var note = $tree.treeview('getChecked');
            $.each(note, function (i, item) {
                map.push(item.id);
            });
            return map.toString();
        }

        $("#value").click(function () {
            alert(getValue());
        })
    }


</script>
</html>